<template>
  <div>
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            电子邮件
          </el-header>
          <el-main class="info-main">
            <el-row>
              <el-col style="height: 100%;" :span="20" :offset="2">
                <el-form ref="form" :rules="rules" :model="messageRemind" label-width="150px">
                  <el-form-item prop="messageType" label="消息类型：" class="bg-purple">
                    <el-input class="input-width" v-bind:disabled="isDisabled" v-model="messageRemind.messageType"></el-input>
                  </el-form-item>
                  <el-form-item label="标签说明：">
                    <el-row>
                      <el-col :span="7"><div class="grid-content bg-purple">用户名：{{messageRemind.labelUsername}}</div></el-col>
                      <el-col :span="7"><div class="grid-content bg-purple">订单号：{{messageRemind.labelOrderId}}</div></el-col>
                      <el-col :span="7"><div class="grid-content bg-purple">订单金额：{{messageRemind.labelTotal}}</div></el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="7"><div class="grid-content bg-purple">配送方式：{{messageRemind.labelShippingType}}</div></el-col>
                      <el-col :span="7"><div class="grid-content bg-purple">收货人姓名：{{messageRemind.labelShippingName}}</div></el-col>
                      <el-col :span="7"><div class="grid-content bg-purple">收货人地址：{{messageRemind.labelShippingAddr}}</div></el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="7"><div class="grid-content bg-purple">收货人邮编：{{messageRemind.labelShippingZip}}</div></el-col>
                      <el-col :span="7"><div class="grid-content bg-purple">收货人电话：{{messageRemind.labelShippingPhone}}</div></el-col>
                      <el-col :span="7"><div class="grid-content bg-purple">收货人手机：{{messageRemind.labelShippingCell}}</div></el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="7"><div class="grid-content bg-purple">收货人Email：{{messageRemind.labelShippingEmail}}</div></el-col>
                      <el-col :span="7"><div class="grid-content bg-purple">商城名称：{{messageRemind.labelSiteName}}</div></el-col>
                      <el-col :span="7"><div class="grid-content bg-purple">备注：{{messageRemind.labelMemo}}</div></el-col>
                    </el-row>
                  </el-form-item>
                  <el-form-item label="邮件标题：" prop="emailTitle">
                    <el-input class="input-width" v-model="messageRemind.emailTitle"></el-input>
                  </el-form-item>
                  <el-form-item label="内容模板：">
                    <editor-bar v-model="messageRemind.content" :isClear="isClear" @change="change"></editor-bar>
                    <div style="position: absolute;bottom:-30px;font-size:12px;color:#999999;">邮件內容不能为空，长度限不能超过4000个字符</div>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submitForm('form')">提交</el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>
<script>
    import goodImgeListApi from "@/api/goods/imagelist";
    import EditorBar from "@/components/wangEnduit";
    export default {
        data() {
            return {
                requestUrl:goodImgeListApi.getRequestUrl().defaults.baseURL+'/api-sys/message-remind/',
                isClear: false,
                isDisabled:false,
                messageRemind:{
                    id:'',
                    messageType:'',
                    emailTitle:'',
                    content:'',
                    labelUsername:'$Username$',
                    labelOrderId:'$OrderId$',
                    labelTotal:'$Total$',
                    labelShippingType:'$Shipping_Type$',
                    labelShippingName:'$Shipping_Name$',
                    labelShippingAddr:'$Shipping_Addr$',
                    labelShippingZip:'$Shipping_Zip$',
                    labelShippingPhone:'$Shipping_Phone$',
                    labelShippingCell:'$Shipping_Cell$',
                    labelShippingEmail:'$Shipping_Email$',
                    labelSiteName:'$SiteName$',
                    labelMemo:'$Memo$'
                },
                rules: {
                    emailTitle: [
                        {required: true, message: '请输入邮件标题', trigger: 'blur'}
                    ],
                    messageType: [
                        {required: true, message: '请输入消息类型', trigger: 'blur'}
                    ],
                },
                fileList3:[],
            }
        },
        components: { EditorBar },
        methods:{
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let param = new FormData(); //创建form对象
                        param.append('id',this.messageRemind.id);
                        param.append('messageType',this.messageRemind.messageType);
                        param.append('emailTitle',this.messageRemind.emailTitle);
                        param.append('content',this.messageRemind.content);
                        param.append('labelUsername',this.messageRemind.labelUsername);
                        param.append('labelOrderId',this.messageRemind.labelOrderId);
                        param.append('labelTotal',this.messageRemind.labelTotal);
                        param.append('labelShippingType',this.messageRemind.labelShippingType);
                        param.append('labelShippingName',this.messageRemind.labelShippingName);
                        param.append('labelShippingAddr',this.messageRemind.labelShippingAddr);
                        param.append('labelShippingZip',this.messageRemind.labelShippingZip);
                        param.append('labelShippingPhone',this.messageRemind.labelShippingPhone);
                        param.append('labelShippingCell',this.messageRemind.labelShippingCell);
                        param.append('labelShippingEmail',this.messageRemind.labelShippingEmail);
                        param.append('labelSiteName',this.messageRemind.labelSiteName);
                        param.append('labelMemo',this.messageRemind.labelMemo);
                        this.axios.post(this.requestUrl+"form",param).then((response) => {
                            if(response.data.error_no == 0){
                                this.$message({
                                    type: 'success',
                                    message: response.data.error_info
                                });
                                this.$router.replace({path:"/settings/message"});
                            }else{
                                this.$message({
                                    type: 'error',
                                    message: response.data.error_info
                                });
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            change(val) {
                console.log(val);
            },
            submitUpload() {
                this.$refs.upload3.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            beforeAvatarUpload(file) {
                const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
                const isLt50K = file.size /1024 < 50;
                if (!isJPG) {
                    this.$message.error('广告图片只能是 JPG和PNG 格式!');
                }
                if (!isLt50K) {
                    this.$message.error('广告图片大小不能超过 50K!');
                }
                return isJPG && isLt50K;
            },
            handlePreview(file) {
                console.log(file);
            },
            initData(){
                if(this.$route.query.id != '' && this.$route.query.id != undefined){
                    this.axios.get(this.requestUrl+"get?id="+this.$route.query.id).then((response) => {
                        if(response.data.error_no == 0){
                          this.messageRemind = response.data.results;
                            this.isDisabled = true;
                        }
                    })

                }
            }
        },
        mounted() {
            this.initData();
        }
    }
</script>
<style scoped>
  .content-header{
    position: relative;
  }
  .bg-purple {
    border:0px solid #E4E4E4 !important;
    padding:0 !important;
    margin:0 !important;
  }
  .return-style{
    position: absolute;
    right:10px;
  }
  .input-width{
    width:250px;
  }
  .bg-purple{
    color:#999999;
  }
</style>